---
type: integration
title: '@astrojs/vercel'
description: '@astrojs/vercelアダプターを使用してAstroプロジェクトをデプロイする方法を学びます。'
sidebar:
  label: Vercel
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vercel/'
category: adapter
i18nReady: false
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';
import ReadMore from '~/components/ReadMore.astro'
import { Steps } from '@astrojs/starlight/components';

このアダプターを使用すると、Astroで[オンデマンドでレンダリングされたルートと機能](/ja/guides/on-demand-rendering/)を[Vercel](https://www.vercel.com/)にデプロイできます。これには、[サーバーアイランド](/ja/guides/server-islands/)、[アクション](/ja/guides/actions/)、[セッション](/ja/guides/sessions/)が含まれます。

Astroを静的サイトビルダーとして使用している場合、このアダプターが必要になるのは、追加のVercelサービス（[Vercel Web Analytics](https://vercel.com/docs/analytics)、[Vercel Image Optimization](https://vercel.com/docs/image-optimization)など）を使用している場合のみです。それ以外の場合、静的サイトをデプロイするためにアダプターは必要ありません。

[Vercelデプロイガイド](/ja/guides/deploy/vercel/)でAstroサイトをデプロイする方法を学びましょう。

## Astro Vercelを選ぶ理由

[Vercel](https://www.vercel.com/)は、GitHubリポジトリに直接接続してサイトをホストできるデプロイメントプラットフォームです。このアダプターは、Astroのビルドプロセスを強化し、Vercelを介したデプロイメントのためにプロジェクトを準備します。

## インストール

Astroには、公式インテグレーションのセットアップを自動化するための`astro add`コマンドが含まれています。もしよろしければ、[手動でインテグレーションをインストールする](#手動インストール)こともできます。

次の`astro add`コマンドでVercelアダプターを追加して、Astroプロジェクトでオンデマンドレンダリングを有効にします。これにより、`@astrojs/vercel`がインストールされ、`astro.config.mjs`ファイルに適切な変更が一度に行われます。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add vercel
  ```
  </Fragment>
</PackageManagerTabs>


これで、[ページごとにオンデマンドレンダリングを有効にする](/ja/guides/on-demand-rendering/#オンデマンドレンダリングを有効にする)か、ビルド出力設定を`output: 'server'`に設定して[デフォルトですべてのページをサーバーレンダリング](/ja/guides/on-demand-rendering/#serverモード)できます。

### 手動インストール

まず、お好みのパッケージマネージャーを使用して、`@astrojs/vercel`アダプターをプロジェクトの依存関係に追加します。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/vercel
  ```
  </Fragment>
</PackageManagerTabs>

次に、アダプターを`astro.config.*`ファイルに追加します。

```js title="astro.config.mjs" ins={2, 6}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel(),
});
```

## 使い方

<ReadMore>[プロジェクトをVercelにデプロイする](/ja/guides/deploy/vercel/)について詳しくはこちら。</ReadMore>

CLI（`vercel deploy`）でデプロイするか、[Vercelダッシュボード](https://vercel.com/)で新しいリポジトリを接続してデプロイできます。または、ローカルで本番ビルドを作成できます。

```sh
astro build
vercel deploy --prebuilt
```

## 設定

このアダプターを設定するには、`astro.config.mjs`の`vercel()`関数呼び出しにオブジェクトを渡します。

### `webAnalytics`

**Type:** `VercelWebAnalyticsConfig`<br/>
**Available for:** Serverless, Static<br/>
<Since v="3.8.0" pkg="@astrojs/vercel" />

`@vercel/analytics@1.3.x`以前では、Astro設定で`webAnalytics: { enabled: true }`を設定して、Vercelの追跡スクリプトをすべてのページに挿入できます。

`@vercel/analytics@1.4.0`以降では、代わりにVercelのAnalyticsコンポーネントを使用して[Vercel Web Analytics](https://vercel.com/docs/concepts/analytics)を有効にします。

```js title="astro.config.mjs" ins={7-9}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
  }),
});
```

### `imagesConfig`

**Type:** `VercelImageConfig`<br/>
**Available for:** Serverless, Static
<Since v="3.3.0" pkg="@astrojs/vercel" />

[Vercelの画像最適化API](https://vercel.com/docs/concepts/image-optimization)の設定オプション。[サポートされているパラメーターのリスト](https://vercel.com/docs/build-output-api/v3/configuration#images)については、Vercelの画像設定ドキュメントを参照してください。

`domains`および`remotePatterns`プロパティは、[対応するAstroの`image`設定](/ja/reference/configuration-reference/#image-options)を使用して自動的に入力されます。

```js title="astro.config.mjs" ins={8-10}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imagesConfig: {
      sizes: [320, 640, 1280],
    },
  }),
});
```

### `imageService`

**Type:** `boolean`<br/>
**Available for:** Serverless, Static
<Since v="3.3.0" pkg="@astrojs/vercel" />

有効にすると、Vercel Image Optimization APIを利用した[画像サービス](/ja/reference/image-service-reference/)が自動的に設定され、本番環境で使用されます。開発環境では、代わりに[`devImageService`](#devimageservice)で指定された画像サービスが使用されます。

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imageService: true,
  }),
});
```

```astro title="src/pages/index.astro"
---
import { Image } from 'astro:assets';
import astroLogo from '../assets/logo.png';
---

<!-- このコンポーネント -->
<Image src={astroLogo} alt="My super logo!" />

<!-- は次のHTMLになります -->
<img
  src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..."
  alt="My super logo!"
  loading="lazy"
  decoding="async"
  width="..."
  height="..."
/>
```

### `devImageService`

**Type:** `'sharp' | string`<br/>
**Available for:** Serverless, Static
<Since v="3.8.0" pkg="@astrojs/vercel" />
**Default**: `sharp`

[imageService](#imageservice)が有効になっている場合に、開発で使用する画像サービスを設定できます。これは、開発マシンにSharpの依存関係をインストールできないが、Squooshなどの別の画像サービスを使用すると開発環境で画像をプレビューできる場合に便利です。ビルドは影響を受けず、常にVercelの画像最適化を使用します。

Astroの組み込みのものの代わりにカスタム画像サービスを使用するために、任意の値に設定することもできます。

```js title="astro.config.mjs" ins={7-8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    imageService: true,
    devImageService: 'sharp',
  }),
});
```

### `isr`

**Type:** <code>boolean |   VercelISRConfig</code><br/>
**Available for:** Serverless
<Since v="7.2.0" pkg="@astrojs/vercel" />
**Default**: `false`

プロジェクトを[ISR（incremental static regeneration）](https://vercel.com/docs/incremental-static-regeneration)関数としてデプロイできるようにします。これにより、最初のリクエスト後に事前レンダリングされたページと同じ方法でオンデマンドでレンダリングされたページがキャッシュされます。

この機能を有効にするには、`astro.config.mjs`のVercelアダプター設定で`isr`をtrueに設定します。

```js title="astro.config.mjs" ins={7}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    isr: true,
  }),
});
```

ISR関数リクエストには、静的モードの[リクエスト](/ja/reference/api-reference/#request)と同様に、検索パラメーターは含まれないことに注意してください。

#### ISRキャッシュの無効化

デフォルトでは、ISR関数はデプロイメントの期間中キャッシュします。有効期限を設定するか、特定のルートをキャッシュから完全に除外することで、キャッシュをさらに制御できます。

##### 時間ベースの無効化

`expiration`値を秒単位で設定することで、ルートをキャッシュする期間を変更できます。

```js title="astro.config.mjs" {7-10}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    isr: {
      // すべてのページを最初のリクエストでキャッシュし、1日間保存します
      expiration: 60 * 60 * 24,
    },
  }),
});
```

##### キャッシュからのパスの除外

Vercelの[ドラフトモード](https://vercel.com/docs/build-output-api/v3/features#draft-mode)または[オンデマンドインクリメンタルスタティックリジェネレーション（ISR）](https://vercel.com/docs/build-output-api/v3/features#on-demand-incremental-static-regeneration-isr)を実装するには、バイパストークンを作成し、キャッシュから除外するルートとともに`isr`設定に提供できます。

```js title="astro.config.mjs" {6-15}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
    adapter: vercel({
        isr: {
            // 作成した秘密のランダムな文字列。
            bypassToken: "005556d774a8",
            // 常に最新の状態で提供されるパス。
            exclude: [
              '/preview', 
              '/auth/[page]',
              /^\/api\/.+/ // @astrojs/vercel@v8.1.0以降でサポートされている正規表現
            ]
        }
    })
})
```

### `includeFiles`

**Type** `string[]`<br/>
**Available for** Serverless

このプロパティを使用して、ファイルを強制的に関数にバンドルします。これは、不足しているファイルに気付いた場合に役立ちます。

```js title="astro.config.mjs" ins={7}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    includeFiles: ['./my-data.json'],
  }),
});
```

### `excludeFiles`

**Type** `string[]`<br/>
**Available for** Serverless

このプロパティを使用して、通常は含まれるバンドルプロセスからファイルを除外します。

```js title="astro.config.mjs" ins={7}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    excludeFiles: ['./src/some_big_file.jpg'],
  }),
});
```

### `maxDuration`

**Type** `number`<br/>
**Available for** Serverless

このプロパティを使用して、Serverless Functionsがタイムアウトする前に実行できる最大期間（秒単位）を延長または制限します。アカウントプランのデフォルトおよび最大制限については、[Vercelのドキュメント](https://vercel.com/docs/functions/serverless-functions/runtimes#maxduration)を参照してください。

```js title="astro.config.mjs" ins={7}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
// ...
  adapter: vercel({
    maxDuration: 60
  }),
});
```

### `skewProtection`

**Type:** `boolean`<br/>
**Available for:** Serverless
<Since pkg="@astrojs/vercel" v="7.6.0" />

このプロパティを使用して、[Vercel Skew保護](https://vercel.com/docs/deployments/skew-protection)（Vercel ProおよびEnterpriseアカウントで利用可能）を有効にします。

```js title="astro.config.mjs" ins={7}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
// ...
  adapter: vercel({
    skewProtection: true
  }),
});
```

### Vercel Edge FunctionsでAstroミドルウェアを実行する

`@astrojs/vercel`アダプターは、コードベース内のAstroミドルウェアから[Edge functions](https://vercel.com/docs/functions/edge-functions)を作成できます。`edgeMiddleware`が有効になっている場合、エッジ関数は、静的アセット、事前レンダリングされたページ、オンデマンドでレンダリングされたページを含むすべてのリクエストに対してミドルウェアコードを実行します。

オンデマンドでレンダリングされたページの場合、`context.locals`オブジェクトはJSONを使用してシリアル化され、レンダリングを実行するサーバーレス関数にヘッダーで送信されます。セキュリティ対策として、サーバーレス関数は、生成されたエッジ関数からのリクエストでない限り、`403 Forbidden`レスポンスでリクエストを拒否します。

これはオプトイン機能です。有効にするには、`edgeMiddleware`を`true`に設定します。

```js title="astro.config.mjs" "edgeMiddleware: true"
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    edgeMiddleware: true,
  }),
});
```

エッジミドルウェアは、`ctx.locals.vercel.edge`としてVercelの[`RequestContext`](https://vercel.com/docs/functions/edge-middleware/middleware-api#requestcontext)にアクセスできます。TypeScriptを使用している場合は、`src/env.d.ts`を更新して`EdgeLocals`を使用することで、適切な型指定を取得できます。

```ts
type EdgeLocals = import('@astrojs/vercel').EdgeLocals

declare namespace App {
  interface Locals extends EdgeLocals {
    // ...
  }
}
```

### セッション

Astro [Sessions API](/ja/guides/sessions/)を使用すると、リクエスト間でユーザーデータを簡単に保存できます。これは、ユーザーデータや設定、ショッピングカート、認証情報などに使用できます。Cookieストレージとは異なり、データにサイズ制限はなく、別のデバイスで復元できます。

Vercelでセッションを使用する場合、セッションストレージ用に[ドライバーを設定する](/ja/reference/configuration-reference/#sessiondriver)必要があります。[Vercelマーケットプレイス](https://vercel.com/marketplace?category=storage)からストレージプロバイダーをインストールできます。

たとえば、[Redisインテグレーション](https://vercel.com/marketplace?category=storage&search=redis)をインストールし、データベースをサイトにリンクした場合：

<Steps>

1. `ioredis`パッケージをインストールします。
   <PackageManagerTabs>
     <Fragment slot="npm">
     ```sh
     npm install ioredis
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```sh
     pnpm install ioredis
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```sh
     yarn add ioredis
     ```
     </Fragment>
   </PackageManagerTabs>

2. [Vercel CLI](https://vercel.com/docs/cli)を使用して環境変数をロードします。
   ```sh
   vercel env pull .env.local
   ```
   これにより、プロジェクトのルートに`.env.local`ファイルが作成され、ローカルで開発するときにRedisデータベースに接続するために必要な環境変数が含まれます。

3. セッションドライバーを設定します。

    ```js title="astro.config.mjs" ins={6-11}
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel';

    export default defineConfig({
      adapter: vercel(),
      session: {
        driver: 'redis',
        options: {
          url: process.env.REDIS_URL,
        },
      },
    });
    ```

</Steps>

## Node.jsのバージョンサポート

`@astrojs/vercel`アダプターは、VercelでAstroプロジェクトをデプロイするために特定のNode.jsバージョンをサポートしています。VercelでサポートされているNode.jsバージョンを表示するには、プロジェクトの設定タブをクリックし、「Node.js Version」セクションまでスクロールダウンしてください。

詳細は[Vercelのドキュメント](https://vercel.com/docs/functions/serverless-functions/runtimes/node-js#default-and-available-versions)をご覧ください。

## 実験的な機能

以下の機能も利用可能ですが、将来のアップデートで破壊的な変更が加えられる可能性があります。この機能をプロジェクトで使用している場合は、[`@astrojs/vercel` CHANGELOG](https://github.com/withastro/astro/tree/main/packages/integrations/vercel/CHANGELOG.md)で更新情報を確認してください。

### `experimentalStaticHeaders`

<p>
  **Type:** `boolean`<br/>
  **Default:** `false`<br />
  **Available for:** Serverless <br/>
  <Since pkg="@astrojs/vercel" v="8.2.0" />
</p>

Vercelの設定で事前レンダリングされたページのカスタムヘッダーを指定できるようにします。

有効にすると、アダプターはコンテンツセキュリティポリシーなどのAstroの機能によって提供された[静的ヘッダーをVercelの`vercel.json`ファイル](https://vercel.com/docs/project-configuration#headers)に保存します。

たとえば、[実験的なコンテンツセキュリティポリシー](/ja/reference/experimental-flags/csp/)が有効な場合、`experimentalStaticHeaders`を使用して、`<meta>`要素を作成する代わりにCSP`headers`をVercel設定に追加できます。

```js title="astro.config.mjs" {9}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  experimental: {
    csp: true
  },
  adapter: vercel({
    experimentalStaticHeaders: true 
  })
});
```

[astro-integration]: /ja/guides/integrations-guide/
